<script setup>
import { appStockListQuery } from "@/services/cashier";
import { onLoad, onReady, onShow } from "@dcloudio/uni-app";
import { nextTick, ref, watch, onMounted } from "vue";
import { appOrderDetail } from "@/services/cashier";

const id = ref("");
const orderDetail = ref({});

onLoad((e) => {
  id.value = e.id;
});
onShow(() => {
  getAppOrderDetail();
});
onReady(() => {
  // 微信小程序需要用此写法
  // datetimePickerRef.value.setFormatter(formatter);
});

const getAppOrderDetail = async () => {
  let res = await appOrderDetail({
    id: id.value,
  });
  if (res.data.refundStatus == 1) {
    res.data.details.forEach((element) => {
      if (res.data.refundDetails) {
        res.data.refundDetails.forEach((item) => {
          if (element.productId === item.productId) {
            element.refundNum = item.totalNum;
            element.refundAmount = item.totalAmount;
          }
        });
      }
    });
  }

  orderDetail.value = res.data;
  // openList.value = res.data.datas;
};
const selectShow = ref(false);
function open() {
  // 打开逻辑，比如设置 show 为 true
  // selectShow.value = true;
  // console.log('open');
}
const form = ref({
  keyword: "",
});
const gorefund = () => {
  uni.navigateTo({
    url: "/pages/cashier/refund/index?id=" + id.value,
  });
};
//无网状态
const connected = () => {
  getAppOrderDetail();
};
</script>

<template>
  <view class="bg">
    <top-nav :title="'销售单详情'" :border="false" rType="save"></top-nav>

    <view class="content">
      <view class="content-list">
        <view
          class="content-list-item"
          v-for="(item, index) in orderDetail.details"
          :key="index"
        >
          <view class="content-list-image">
            <image :src="item.image" mode="scaleToFill" />
          </view>
          <view class="content-list-right">
            <view class="content-list-right-title"
              ><text>{{ item.productName }}</text>
              <view>¥{{ item.taxPrice }}</view></view
            >
            <view class="content-list-right-desc"
              ><text>{{ item.categoryName }}</text>
              <text>共{{ item.orderNum }}件</text>
            </view>
            <view class="content-list-right-pay"
              ><text>原价￥{{ item.oriPrice }}</text>
              <text class="orange" v-if="item.refundNum"
                >退货{{ item.refundNum }}件 退款￥{{ item.refundAmount }}</text
              >
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="content-info">
      <view class="content-info-title">订单金额</view>
      <view class="content-info-flex"
        ><text>商品总额</text><text>￥{{ orderDetail.totalAmount }}</text>
      </view>
      <view class="content-info-flex"
        ><text>折扣</text
        ><text>{{
          orderDetail.totalDiscount < 100
            ? orderDetail.totalDiscount / 10 + "折"
            : "无折扣"
        }}</text></view
      >
      <view class="content-info-flex"
        ><text>总实收</text
        ><text>￥{{ orderDetail.totalGoodsAmount }}</text></view
      >
    </view>
    <view class="content-info" v-if="orderDetail.payType">
      <view class="content-info-title">支付信息</view>
      <view class="content-info-flex"
        ><text>{{ orderDetail.payType }}</text
        ><text>￥{{ orderDetail.totalAmount }}</text>
      </view>
      <!-- <view class="content-info-flex"
        ><text>找零</text
        ><text>￥{{ orderDetail.totalGoodsAmount }}</text></view
      > -->
    </view>

    <view
      v-permission="['manager:pay:refund', 'shop:pay:refund']"
      class="content-info"
      v-if="orderDetail.refundStatus == 1"
    >
      <view class="content-info-title content-info-title-two">退款信息</view>
      <view class="content-info-flex"
        ><text> 退款金额</text
        ><text style="color: #ff5722">￥{{ orderDetail.refundFee }}</text>
      </view>
      <view class="content-info-flex"
        ><text> 退款时间</text><text>{{ orderDetail.refundTime }}</text>
      </view>

      <!-- <view class="content-info-flex"
        ><text>找零</text
        ><text>￥{{ orderDetail.totalGoodsAmount }}</text></view
      > -->
    </view>

    <view class="content-info">
      <view class="content-info-title">订单信息</view>

      <view class="content-info-flex"
        ><text>订单编号</text><text>{{ orderDetail.code }}</text></view
      >
      <view class="content-info-flex"
        ><text>下单时间</text><text>{{ orderDetail.createTime }}</text>
      </view>

      <view class="content-info-flex"
        ><text>操作人</text><text>{{ orderDetail.salerName }}</text>
      </view>
    </view>

    <view style="width: 100%; height: 150rpx"></view>

    <view class="bt-bt" v-if="orderDetail.canRefund">
      <view class="popup-content-btn">
        <view class="bt-w">
          <button class="bt-qx" @click="gorefund()">退款</button>
        </view>
        <!-- <view class="bt-w">
          <up-button
            class="bt-qd"
            type="primary"
            @click="selectTo()"
            text="确定"
          ></up-button>
        </view> -->
      </view>
    </view>
  </view>
  <noWork @connected="connected"> </noWork>
</template>

<style lang="scss" scoped>
@import "index.scss";
</style>
